<template>
    <div class="burger">
        <span :class="spanStatus ? 'first-span' : 'first-span-active'" :style="`background-color: ${backgroundColor};`"></span>
        <span :class="spanStatus ? 'middle-span' : 'middle-span-active'" :style="`background-color: ${backgroundColor};`"></span>
        <span :class="spanStatus ? 'last-span' : 'last-span-active'" :style="`background-color: ${backgroundColor};`"></span>
    </div>
</template>

<script setup>
import { computed } from 'vue';

// ========================= 接收值 =========================
const props = defineProps({
    status: {
        type: Boolean,
        default: true
    },

    backgroundColor: {
        type: String,
        default: '#FFFFFF'
    }
});

const spanStatus = computed(() => props.status)
</script>

<style lang="scss" scoped>
    @import "./hamburger-menu.scss";
</style>
